import React, { useCallback, useMemo } from 'react';
import SettingTable from '@/pages/TurnoverSetting/EntrySetting/EntrySettingIndex/containers/SettingTable';
import LinkTo from '@/components/LinkTo';
import { DividerContainer } from '@/molecules';
import { Tag, Tooltip } from 'antd';
import IconFont from '@/components/IconFont';
import ButtonPopconfirmAndToolTip from '@/pages/TurnoverSetting/EntrySetting/components/ButtonPopconfirmAndToolTip';
import { history } from 'umi'
import { defaultFormatResult, useRequest } from '@/hooks';
import styles from '../index.less';
import { getHandoverFlowList, deleteHandoverFlowList } from '../services';


export default function HandverprocessSetting(props) {
    const { data = [], run, loading } = useRequest(getHandoverFlowList, {
        ...defaultFormatResult
    });

    const { run: deleteRun, loading: deleteLoading } = useRequest(deleteHandoverFlowList, {
        manual: true,
        ...defaultFormatResult,
        onSuccess: () => {
            run()
        }
    });

    const handleViewDetail = record => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/leaveSetting/handoverFlow/detail',
            query: { id: record.id },
            state: { tabRoute: true, tabRefresh: true }
        });
    };

    const handleAdd = useCallback(() => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/leaveSetting/handoverFlow/add'
        });
    }, []);

    const handleEdit = record => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/setting/leaveSetting/handoverFlow/edit',
            query: { id: record.id }
        });
    };

    const columns = useMemo(
        () => [
            {
                title: '配置名称',
                dataIndex: 'configName',
                render: (text, record) => {
                    const { hasDefault } = record;
                    return <div style={{ display: 'flex', alignItems: 'center' }}>
                        <LinkTo isDefault onClick={() => { handleViewDetail(record) }}>
                            {text}
                        </LinkTo>
                        {hasDefault && <Tag color="orange" style={{ marginLeft: 8 }}>默认</Tag>}
                    </div>
                }
            },
            {
                title: '适用行政机构',
                dataIndex: 'companyName',
                render: (text, record) => (record.hasDefault ? '全集团' : text)
            },
            {
                title: '操作',
                key: 'operation',
                width: 100,
                render: (text, record) => (
                    <DividerContainer>
                        <Tooltip placement="top" title="编辑">
                            <IconFont
                                style={{ verticalAlign: 'middle' }}
                                onClick={() => handleEdit(record)}
                                icon="iconlistfunction_edit_icon_default"
                                isButton
                            />
                        </Tooltip>
                        <ButtonPopconfirmAndToolTip
                            title="你确定要删除这行内容吗？"
                            tooltipTitle={record.hasDefault === 1 ? '默认配置，不可删除' : '删除'}
                            onConfirm={() => deleteRun(record.id)}
                            disabled={record.hasDefault}
                        >
                            <IconFont icon="iconlistfunction_delete_icon_default" isButton />
                        </ButtonPopconfirmAndToolTip>

                    </DividerContainer>
                )
            }
        ],
        []
    );
    return (
        <div {...props} className={styles.sever_container}>
            <div className={styles.sectionTitle}>交接流程配置</div>
            <div className={styles.sectionDesc}>
                <p>定义离职交接任务的顺序、处理人及内容，支持并优先采用定制化配置</p>
            </div>
            <SettingTable
                dataSource={data}
                loading={loading || deleteLoading}
                columns={columns}
                authCode
                onAdd={handleAdd}
            />
        </div>
    );
}
